/* eslint-disable no-unused-vars */
import useUrlState from '@ahooksjs/use-url-state';
import { useRequest } from 'ahooks';
import axios from 'axios';
import React, { useEffect, useMemo } from 'react';

import Comment from '@/components/Comment';
import Layout from '@/components/Layout';
import MarkDown from '@/components/MarkDown';
import { DB } from '@/utils/apis/dbConfig';
import { getWhereData } from '@/utils/apis/getWhereData';
import { _ } from '@/utils/cloudBase';
import { staleTime } from '@/utils/constant';

import CopyRight from './CopyRight';
import s from './index.scss';
import Navbar from './Navbar';
import PostTags from './PostTags';
import { connect } from 'react-redux';
import { storeState } from '@/redux/interface';

const baseUrl = window.location.origin;
const articleContext = require.context(
  './md',
  false,
  /[0-9]\.md$/
);
let articleId = 1;

const articlePaths = articleContext
  .keys()
  .map((item) => {
    // const des = item.split('-');
    return { code: item, name: item, value: articleContext(item).default };
  });

const articlePath = articlePaths.find((item) => item.code.includes(`article${articleId}`));
// console.log('articlePath: ', articlePath);

const Post: React.FC = ({ allMd }: any) => {
  const [search] = useUrlState();
  const data = useMemo(() => {
    return allMd.filter((item: any) => {
      return item._id === Number(search.id)
    })[0]
  }, [allMd])

  return (
    <Layout
      title={data.title}
      // loading={loading}
      classes={data.title}
      date={data.date}
      isPost={true}
      rows={14}
    >
      <MarkDown content={articlePath?.value} className={s.mb} />
      {/* <PostTags tags={data?.data[0].tags} /> */}
      <Navbar content={data.content} />
    </Layout>
  );
};

export default connect((state: storeState) => ({
  allMd: state.allMd
}), {})(Post);